<template>
  <div class="home">


    <el-row style="margin-top: 15px">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <h1 style="margin-right: 300px">分布式供应链管理与验证平台</h1>
        </div></el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <div id="nav">
            <router-link to="/">首页</router-link> |
            <router-link to="/login">登录</router-link>
          </div>
        </div></el-col>
    </el-row>

<!--    <el-button>{{ msg }}</el-button>-->
<!--    <img alt="Vue logo" src="../assets/logo.png">-->
    <IndexSwiper  style="margin-top: 10px"/>
    <el-skeleton :rows="1" animated />

    <el-steps :active="4" align-center style="margin-top: 25px">
      <el-step title=" " description=" ">
      </el-step>
      <el-step title=" " description=" "></el-step>
      <el-step title=" " description=" "></el-step>
      <el-step title=" " description=" "></el-step>
    </el-steps>
    <el-row style="margin-top: 15px">
      <el-col :span="6">
        <div class="grid-content bg-purple">
        <el-button type="primary" style="font-size: x-large" @click="goLoginView()">
          知识图谱
        </el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button type="primary" style="font-size: x-large" @click="goLoginView()">
            供应链变更效应传播仿真系统
          </el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-button type="primary" style="font-size: x-large" @click="goLoginView()">
            供应链变更辅助决策支持系统
          </el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-button type="primary" style="font-size: x-large" @click="goLoginView()">
            供应链变更效应传播可视化系统
          </el-button>
        </div>
      </el-col>
    </el-row>

<!--    <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">-->
<!--      <el-step title="知识图片构建" ></el-step>-->
<!--      <el-step title="分析仿真模块" ></el-step>-->
<!--      <el-step title="辅助决策支持" ></el-step>-->
<!--      <el-step title="供应管理可视化" ></el-step>-->
<!--    </el-steps>-->
<!--    <HelloWorld msg="Welcome to Your Vue.js App"/>-->
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import IndexSwiper from "@/components/index/IndexSwiper";

export default {
  name: 'Home',
  data() {
    return {
      msg: "沈艺珊的elmentui导入测试"
    }

  },
  methods: {
    goLoginView() {
      this.$router.push({
        path: "/login"
      })
    }
  },
  components: {
    IndexSwiper,
    HelloWorld
  }
}
</script>
